<script setup lang="tsx">
import dayjs from 'dayjs';
import { UUID } from 'uuidjs';
import { reactive, ref } from 'vue';
import {
  exportbrokenKnifeList,
  getbrokenKnifeList
} from '@/service/api/modules/collection-management/broken-knife-list';
import SearchBox from './modules/search.vue';

const leftPage = ref({
  pageNum: 1,
  pageSize: 200
});

const searchParams = ref<any>({
  equipmentId: null,
  prodNo: null,
  diameter: null,
  time: [dayjs(new Date()).subtract(1, 'day').startOf('day'), dayjs().startOf('day')]
});

const pagination = reactive({
  current: leftPage.value.pageNum,
  pageSize: leftPage.value.pageSize,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: (total: number, range: number[]) => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current: number, size: number) => {
    pagination.current = current;
    pagination.pageSize = size;
    leftPage.value.pageNum = current;
    leftPage.value.pageSize = size;
    getLeftTableData();
  }
});

const currentRowId = ref(null);
const customRow = record => {
  return {
    style: {
      // 设置字体颜色
      // 'color': record.id === this.leftAlignId ? '#fff' : '',
      //  设置行背景色
      // 'background-color': record.uid === currentRowId.value ? 'rgba(86, 205, 243, 0.3)' : ''
      // 设置字体类型
      // 'font-family': 'Microsoft YaHei',
      // // 下划线
      // 'text-decoration': 'underline',
      // // 字体样式-斜体
      // 'font-style': 'italic',
      // // 字体加粗
      // 'font-weight': 'bold'
      background: record.uid === currentRowId.value ? '#BAEAFA' : ''
    },
    class: record.uid === currentRowId.value ? 'jl-table-row-selected' : '',
    onClick: () => {
      currentRowId.value = record.uid;
    }
  };
};

const leftTableData = ref([]);

const columnChecks = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'fullProdNo',
    dataIndex: 'fullProdNo',
    title: '生产型号',
    width: 160,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'subEqpId',
    dataIndex: 'subEqpId',
    title: '设备ID',
    width: 140,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'subEqpName',
    dataIndex: 'subEqpName',
    title: '设备名称',
    width: 160,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'alarmId',
    dataIndex: 'alarmId',
    title: '代码',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'alarmText',
    dataIndex: 'alarmText',
    title: '警报内容',
    width: 160,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'dateTime',
    dataIndex: 'dateTime',
    title: '警报时间',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true
  },

  // {
  //   key: 'recipeName',
  //   dataIndex: 'recipeName',
  //   title: '料号',
  //   width: 160,
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true
  // },
  {
    key: 'brokeKnifeCount',
    dataIndex: 'brokeKnifeCount',
    title: '断刀次数',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'diameter',
    dataIndex: 'diameter',
    title: '断刀直径',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'brokeKnifeMsg',
    dataIndex: 'brokeKnifeMsg',
    title: '断刀信息',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'pgmPath',
    dataIndex: 'pgmPath',
    title: '钻孔程式路径',
    align: 'center',
    checked: true,
    ellipsis: true
  }
  // {
  //   key: 'diaChangeMsg',
  //   dataIndex: 'diaChangeMsg',
  //   title: '刀具参数',
  //   width: 100,
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true
  // }
]);

const leftTableLoading = ref(false);
// setDefaultDateRange();
function getLeftTableData() {
  console.log('searchParams.value :>> ', searchParams.value);
  const { equipmentId, diameter, prodNo } = searchParams.value;
  const params: any = { equipmentId, diameter, prodNo, ...leftPage.value };
  if (searchParams.value.time?.[0]) {
    params.beginTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD HH:mm:ss');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD HH:mm:ss');
  } else {
    params.beginTime = '';
    params.endTime = '';
  }
  leftTableLoading.value = true;
  
  getbrokenKnifeList(params)
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item, index) => {
          item.index = index + 1;
          item.uid = UUID.genV4().hexNoDelim;
        });
        pagination.total = data.total;
        leftTableData.value = data.list;
      }
    })
    .finally(() => (leftTableLoading.value = false));
}

getLeftTableData();
function reset() {
  pagination.current = 1;
  leftPage.value.pageNum = 1;
  getLeftTableData();
}

function search() {
  pagination.current = 1;
  leftPage.value.pageNum = 1;
  getLeftTableData();
}

function downLoadExcel() {
  const { equipmentId, diameter } = searchParams.value;
  const params: any = { equipmentId, diameter };
  if (searchParams.value.time?.[0]) {
    params.beginTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD HH:mm:ss');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD HH:mm:ss');
  } else {
    params.beginTime = '';
    params.endTime = '';
  }
  exportbrokenKnifeList(params);
}
</script>

<template>
  <div class="jl-main-page one-code-ascend min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <SearchBox v-model:model="searchParams" @reset="reset" @search="search" />

    <ACard
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="table-card flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
      <template #title>
        <AButton type="primary" ghost class="mini-btn" @click="downLoadExcel">
          <template #icon>
            <icon-ic-round-download class="align-sub text-icon" />
          </template>
          <span class="ml-3px">下载</span>
        </AButton>
      </template>
      <template #extra>
        <TableColumnSetting v-model:columns="columnChecks" />
      </template>
      <STable
        :columns="columnChecks"
        :data-source="leftTableData"
        bordered
        size="small"
        :loading="leftTableLoading"
        row-key="uid"
        :pagination="pagination"
        :custom-row="customRow"
        class="h-full"
        :row-height="23"
      />
    </ACard>
  </div>
</template>

<style lang="scss" scoped></style>
